import { View,Image } from '@tarojs/components'
import { useEffect, useState } from 'react';
import { request } from "../../utils";
import { apis } from "../../constants";
import Taro from '@tarojs/taro';
import "./index.scss";

interface ParmasProp {
    newsId: string
}

interface ImgProp {
    imgSrc: string,
    size: string
}

interface ListProp {
    content: string,
    cover: string,
    title: string,
    source: string,
    ptime: string,
    images: Array<ImgProp>
}

export default function NewsDetail() {
    const [loading, setLoading] = useState(false);
    const [dataList, setDataList] = useState<ListProp>();
    const [noDate, setNoDate] = useState(false);
    const getDetail = async (newsId: string) => {
        const data = await request({
            method: "GET",
            url: apis.newsDeatils,
            data: { newsId }
        });
        if (data.data) {
            setDataList(data.data)
        }
        else{
            setNoDate(true)
        }
        setLoading(true)
        Taro.hideLoading();

    };

    useEffect(() => {
        Taro.showLoading({
            title: "加载中"
        });
        const router = Taro.getCurrentInstance().router
        if (router?.params) {
            const params: ParmasProp | any = router.params
            getDetail(params.newsId)
        }
    }, [])

    const imgYu=(current:string,urls:Array<string>)=>{
        Taro.previewImage({
            current,
            urls
        })
    }

    return <View className='news-detail'>
        {
            loading && noDate?'暂无内容':<>
            <View className='news-title'>{dataList?.title}</View>
            <View className='news-soure'>{dataList?.source} {dataList?.ptime}</View>
            <View dangerouslySetInnerHTML={{ __html: dataList?.content || '' }}></View>
            {dataList?.images.map(one=><Image src={one.imgSrc} style={{width:'100%'}} onClick={()=>imgYu(one.imgSrc,dataList.images.map(val=>val.imgSrc))}/>)}
        </>
        }
    </View>
}